import { Modal, Form, Input, DatePicker, message, AutoComplete, Select, InputNumber } from 'antd'
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
import EnterpriseUserSelect from '@/components/EnterpriseUserSelect';
import { useEffect } from 'react';
import { formetDate } from '@/utils/dateUtils'
import { connect } from 'umi';
import { RichTextEdit } from '@/components/RichText'
const { Option } = Select;
import { PRIORUTY_LEVEL, PROJECT_BUG_TYPE, PROJECT_BUG_GROUP, PROJECT_BUG_REPEAT_TYPE } from '@/consts/project'
import ArrayUtils from '@/utils/ArrayUtils';
import styles from './styles.less'
import { useState } from 'react';
import { save, getDetail } from '@/services/project/bug'
import ProjectQaSelect from '../ProjectQA/ProjectQaSelect'

const BugAddModalInner = (props) => {

    const {
        projectId,
        visible,
        onCancel,
        onSaveSuccess,
        defaultValue,
        copyBugId,
    } = props;

    const [form] = Form.useForm();
    const [bugSaveLoading, setBugSaveLoading] = useState()
    const [defaultForm, setDefaultForm] = useState()
    const [modalVisible, setModalVisible] = useState(false);

    useEffect(() => {
        if (visible) {
            setModalVisible(visible)
        }
    }, [visible])

    useEffect(() => {
        if (visible) {
            if (defaultValue) {
                setDefaultForm({
                    priorityLevel: '3',
                    repeatType: '1',
                    projectQaCaseId: defaultValue.projectQaCaseId,
                    projectQaItemId: defaultValue.projectQaItemId,
                    name: defaultValue.name,
                    content: {
                        text: `<h6 style=\"text-align:start;\" size=\"0\" _root=\"undefined\" __ownerID=\"undefined\" __hash=\"undefined\" __altered=\"false\">[重现步骤]</h6>
                        <p><span>${defaultValue.steps || ''}</span></p>
                        <h6>[表现结果]</h6><p>
                        </p>
                        <h6>[正确期望]</h6><p>
                        <span>${defaultValue.expect || ''}</span>
                        </p>`
                    }
                })
            } else {
                if (copyBugId) {
                    getDetail(projectId, copyBugId)
                        .then((result) => {
                            if (result.success) {
                                let copyBug = result.data;
                                setDefaultForm({
                                    priorityLevel: copyBug.priorityLevel + '',
                                    repeatType: copyBug.repeatType + '',
                                    projectQaCaseId: copyBug.projectQaCaseId,
                                    projectQaItemId: copyBug.projectQaItemId,
                                    name: copyBug.name,
                                    content: copyBug.content,
                                    groupName: copyBug.groupName,
                                    type:copyBug.type + '',
                                    toUserId:copyBug.toUserId,
                                    endDate:copyBug.endDate
                                })
                            }
                        })
                } else {
                    setDefaultForm({
                        priorityLevel: '3',
                        repeatType: '1',
                        content: {
                            text: '<h6 style=\"text-align:start;\" size=\"0\" _root=\"undefined\" __ownerID=\"undefined\" __hash=\"undefined\" __altered=\"false\">[重现步骤]</h6><p></p><h6>[表现结果]</h6><p></p><h6>[正确期望]</h6><p></p>'
                        }
                    })
                }
            }
        }

    }, [defaultValue, copyBugId])

    useEffect(() => {
        if(defaultForm) {
            form.resetFields()
        }
    },[defaultForm])

    const onCancelBug = () => {
        setModalVisible(false)
        if (onCancel) {
            onCancel(false)
        }
    }

    const saveBug = async () => {
        const values = await form.validateFields()
        setBugSaveLoading(true)
        const data = {
            ...values
        }
        if (values.endDate) {
            data.endDate = formetDate(values.endDate);
        }
        save(projectId, data).then(({ success,data }) => {
            if (success) {
                message.success("保存成功！")
                if (onSaveSuccess) {
                    onSaveSuccess(data)
                }

                setBugSaveLoading(false)
            }
        })
    }


    return (<Modal
        visible={modalVisible}
        closable
        title={"新增bug"}
        onCancel={onCancelBug}
        onOk={() => {
            saveBug();
        }}
        width="80%"
        zIndex="1000"
        destroyOnClose
        confirmLoading={bugSaveLoading}
        okText={"确认"}
        cancelText={"取消"}
    >
        <Form
            form={form}
            preserve={false}
            className={styles.taskAddFrom}
            initialValues={defaultForm}
        >
            {defaultValue?.projectQaCaseId && <FormItem
                label={"关联用例"}
                name="projectQaCaseId"
            >
                {defaultValue?.projectQaCaseName}
            </FormItem>}
            <FormItem
                label={"名称"}
                name="name"
                rules={[
                    {
                        required: true,
                        message: "请输入名称",
                    },
                ]}
            >
                <Input placeholder={"请输入名称"} maxLength={80} ></Input>
            </FormItem>
            <Form.Item className={styles.formItemGroup} >
                <FormItem
                    name="userId"
                    label="负责人"
                    style={{ width: 'calc(50%)', marginRight: '8px' }}
                    rules={[
                        {
                            required: true,
                            message: "请选择负责人",
                        },
                    ]}
                >
                    <EnterpriseUserSelect defaultMy projectId={projectId} ></EnterpriseUserSelect>
                </FormItem>
                <Form.Item
                    label="测试项"
                    name="projectQaItemId"
                    style={{ width: 'calc(50%)' }}
                >
                    <ProjectQaSelect projectId={projectId}></ProjectQaSelect>
                </Form.Item>
            </Form.Item>
            <Form.Item className={styles.formItemGroup}>
                <FormItem
                    name="groupName"
                    label="bug归属"
                    style={{ width: 'calc(50% )', marginRight: '8px' }}
                    rules={[
                        {
                            required: true,
                            message: "请选择归属",
                        },
                    ]}
                >
                    <Select placeholder={"请输入bug归属"}>
                        {ArrayUtils.jsonToArray(PROJECT_BUG_GROUP).map(item => <Option value={`${item.key}`} key={`${item.key}`}>{item.value.name}</Option>)}
                    </Select>
                </FormItem>
                <Form.Item
                    name="type"
                    label="bug类型"
                    style={{ width: 'calc(50%)' }}
                    rules={[
                        {
                            required: true,
                            message: "请选择类型",
                        },
                    ]}
                >

                    <Select placeholder={"请选择bug类型"}>
                        {ArrayUtils.jsonToArray(PROJECT_BUG_TYPE).map(item => <Option value={`${item.key}`} key={`${item.key}`}>{item.value.name}</Option>)}
                    </Select>
                </Form.Item>
            </Form.Item>
            <Form.Item className={styles.formItemGroup} >
                <FormItem
                    name="toUserId"
                    label="指派给"
                    style={{ width: 'calc(50%)', marginRight: '8px' }}
                    rules={[
                        {
                            required: true,
                            message: "指派给",
                        },
                    ]}
                >
                    <EnterpriseUserSelect projectId={projectId} ></EnterpriseUserSelect>
                </FormItem>
                <Form.Item
                    name="repeatType"
                    label="复现情况"
                    style={{ width: 'calc(50%)' }}
                    rules={[
                        {
                            required: true,
                            message: "请选择",
                        },
                    ]}
                >
                    <Select>
                        {ArrayUtils.jsonToArray(PROJECT_BUG_REPEAT_TYPE).map(item => <Option value={`${item.key}`} key={`${item.key}`}>{item.value.name}</Option>)}
                    </Select>
                </Form.Item>
            </Form.Item>
            <Form.Item className={styles.formItemGroup} >
                <FormItem
                    name="priorityLevel"
                    label="优先级"
                    style={{ width: 'calc(50% )', marginRight: '8px' }}
                    rules={[
                        {
                            required: true,
                            message: "请选择优先级",
                        },
                    ]}
                >
                    <Select>
                        {ArrayUtils.jsonToArray(PRIORUTY_LEVEL).map(item => <Option value={`${item.key}`} key={`${item.key}`}>{item.value.name}</Option>)}
                    </Select>
                </FormItem>
                <Form.Item
                    label="截止日期"
                    name="endDate"
                    style={{ width: 'calc(50% - 56px)' }}
                >
                    <DatePicker placeholder="输入截止日期"> </DatePicker>
                </Form.Item>
            </Form.Item>
            <FormItem label={"抄送给"}
                name="ccUserIdList"
            >
                <EnterpriseUserSelect ismultiple projectId={projectId} ></EnterpriseUserSelect>
            </FormItem>
            <FormItem label={"内容"}
                name={["content"]}
            >
                <RichTextEdit showFormButton={false} size="small" />
            </FormItem>
        </Form>
    </Modal>)
}

const BugAddModal = (props) => {
    const {
        visible
    } = props

    return (visible && <BugAddModalInner {...props}></BugAddModalInner>)
}

export default BugAddModal;
